
function fn1(){
  function random(min, max) {
      return Math.floor( Math.random() * (max-min+1)+min ) 
    }
  
  // ### 全局变量
  var wscObj =  document.querySelector('.wsc')
  var score = 0
  var wscX = 0
  var wscY = (window.innerHeight||document.documentElement.clientHeight) - wscObj.offsetHeight
  
  
  // ###随机食物 x轴
  // 1 打开页面，执行定时器代码 1s
  // 2 定时器处理函数中 
  //   2.1 随机数0-9  
  //   2.2 判断2.1随机数68创建冠军食物，01234579热狗食物
  //   2.3 追加食物到页面
  
  function startFoodPlay() 
  {
      // 返回定时器唯一标识
  
      return setInterval(function () {
        // 初始化数据
        var imgObj = document.createElement('img')
  
        // 食物出现概率
        var who = random(0,9) // 68-冠军,01234579-热狗
        
        // 判断出现食物
        if ([6,8].includes(who))
        {
          // <img class="guanjun" src="./img/guanjun.jpg" />
          imgObj.className = 'food guanjun'
          imgObj.src = './img/guanjun.jpg'
          imgObj.setAttribute('type', 'guanjun')
        } else {
          // <img class="hotdog" src="./img/hotdog.jpg" />
          imgObj.className = 'food hotdog'
          imgObj.src = './img/hotdog.jpg'
          imgObj.setAttribute('type', 'hotdog')
      }
  
      // 追加食物到页面
      var min = 0
      var max = (window.innerWidth || document.documentElement.clientWidth) - imgObj.offsetWidth
      imgObj.style.left = random(min, max) + 'px'
      imgObj.style.top = '0px'
      document.body.appendChild(imgObj)
    }, 1000)
  }
  var foodT = startFoodPlay() // 首次开始
  
  
  // ### 食物掉落 y轴
  // 1 打开页面，执行定时器代码 50ms
  // 2 定时器处理函数中 
  //   2.1 获取所有食物
  //   2.2 遍历
  //   2.3 计算top数据：原top+ 2
  //   2.4 判断位置  超出-网页移除，没超出-重置top
  
  setInterval(function () {
    // 获取所有食物
    var foods = document.querySelectorAll('.food')
    // 遍历
    foods.forEach((item, index) => { // item就是一个个图片食物
      // 计算top数据：原top+ 2
      var top = parseInt(item.style.top) + 2
      // 判断位置  超出-网页移除，没超出-重置top
      var maxTop = (window.height || document.documentElement.clientHeight) - item.offsetHeight
      if (top >= maxTop) {
        document.body.removeChild(item)
      } else {
        item.style.top = top + 'px'
      }
  
      // 3. 食物掉落判断是否在王公子范围内
      //    公式x：  食物x > 王公子x  && 食物x < 王公子x+自身宽度
      //    公式y：  食物y+自身高度 > 王公子y
      //    符 合：【公式x、公式y】则分数+1
      var foodX = parseInt(item.style.left)
      var foodY = parseInt(item.style.top) + item.offsetHeight
      if ( 
        (foodX>wscX && foodX<=(wscX+wscObj.offsetWidth))
        &&
        foodY>wscY
      ) {
        var type = item.getAttribute('type')
        // score++
        type == 'guanjun' ? score+=5 : score++
        console.log(`食物坐标【${foodX},${foodY}】，王公子坐标【${wscX+wscObj.offsetWidth},${wscY+wscObj.offsetHeight}】，+1，总分【${score}}】`);
        document.querySelector('.game-score h1:nth-of-type(2)').innerText = `+${score}分`
        document.body.removeChild(item) 
        
        // 提示 <div class="show-score">+1</div>
        var divObj = document.createElement('div')
        divObj.className = 'show-score'
        divObj.innerText = type == 'guanjun' ? '+5' : '+1' 
        divObj.style.left = wscX+wscObj.offsetWidth + 'px'
        // divObj.style.bottom = wscY+wscObj.offsetHeight + 'px'
        document.body.appendChild(divObj)
        setTimeout(() => document.body.removeChild(divObj), 1000)
      }
      
    })
  })
  
  
  // ### 安排王公子
  // 1 打开网页，绑定鼠标移动事件
  // 2 事件处理函数中
  //   2.1 获取事件对象
  //   2.2 限定left最大0 最大网页宽度-王公子宽度
  //   2.3 同步left为鼠标位置
  
  document.onmousemove = function(evt) {
    // 获取事件对象
    var e = evt || window.event
    // 限定left最大0 最大网页宽度-王公子宽度
    var wscObj = document.querySelector('.wsc')
    var left = e.clientX - wscObj.offsetWidth/2
    var maxLeft = (window.innerWidth || document.documentElement.clientWidth) - wscObj.offsetWidth
    if (left<0) left = 0
    if (left>=maxLeft) left = maxLeft
    // 同步left为鼠标位置
    wscObj.style.left = left + 'px'
  
    // 重置王公子坐标
    wscX = left
  }
  
  
  // ### 吃食物
  // 1. script开始标记位置定时全局变量 保存王公子坐标
  // 2. 王公子移动 重置全局变量
  // 3. 食物掉落判断是否在王公子范围内
  //    公式x：  食物x > 王公子x  && 食物x <= 王公子x+自身宽度
  //    公式y：  食物y+自身高度 > 王公子y  
  //    符 合：【公式x、公式y】则分数+1
  
  
  // ### 结束游戏
  // 1 打开页面，执行定时器代码 1s
  // 2 定时器处理函数中 
  //   2.1 time--
  //   2.2 判断
  //   time>=0 同步到页面
  //   else   1-清除游戏倒计时、2-清除随机食物、3-重置游戏60s、4-展示重新开始面板
  var time = 61
  function startTimePlay() 
  {
    return setInterval(function () {
      time--
      var gameScoreObj = document.querySelector('.game-score span')
      if (time>=0) {
        gameScoreObj.innerText = time
      }else {
        
        clearInterval(gameT) // 1-清除游戏倒计时
        clearInterval(foodT) // 2-清除随机食物
        time = 61            // 3-重置游戏60s
        // 4-展示重新开始面板
        var payPanel = document.querySelector('.play-panel')
        var payPanelStop = payPanel.querySelector('.stop')
        payPanel.querySelector('.score').innerText = score+'分'
        payPanel.style.display = 'block'
        payPanelStop.style.display = 'block'
      }
    }, 1000)
  }
  var gameT = startTimePlay() 
  
  
  // ### 重新开始游戏
  var startBtn = document.querySelector('.play-panel .stop .btn')
  startBtn.onclick = function() {
    // 清空分数
    score = 0             
    document.querySelector('.game-score h1:nth-of-type(2)').innerText = `+${score}分`
    // 开始游戏
    foodT = startFoodPlay() 
    gameT = startTimePlay()
    // 开启面板
    var payPanel = document.querySelector('.play-panel')
    var payPanelStop = payPanel.querySelector('.stop')
    payPanel.style.display = 'none'  
    payPanelStop.style.display = 'none'
  }
}
fn1()